<template>

  <div >
    <h3 style="text-align:center">{{title}}</h3>
    <div v-loading="loading">
    <div style="width: 50%;margin: auto;" >
      <el-form :model="form" :inline="true" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item >
               <span slot="label">
                        <span class="span-box">
                                      <i class="el-icon-location-information"></i>
                            <span> 当前位置 </span>
                        </span>
                    </span>
          <el-input  style="background-color:transparent;border:0;" placeholder="请输入希望生成的字符" :disabled="true" v-model="MyLocation" ></el-input>
        </el-form-item>


        <el-form-item label="全国确诊人数">
          <el-input v-model.trim="form.TotalConfirm" placeholder="0"></el-input>
        </el-form-item>
        <el-form-item label="广东累计确诊人数">
          <el-input v-model.trim="form.gdTotalConfirm" placeholder="0"></el-input>
        </el-form-item>
        <el-form-item label="全国今日确诊人数">
          <el-input v-model.trim="form.curConfirm" placeholder="0"></el-input>
        </el-form-item>
        <el-form-item label="广东今日确诊人数">
          <el-input v-model.trim="form.gdCurConfirm" placeholder="0"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>

    <div style="margin: 20px 0;"></div>
    <div style="width: 100%;margin: auto;">
      <el-table
          :data="tableData"
          style="width: 100%"
          max-height="280"
          >

        <el-table-column
            prop="currentTime"
            label="更新日期"
            width="120"
            align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.currentTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="city"
            label="城市"
            width="180"
            align="center">
        </el-table-column>
        <el-table-column
            prop="confirm"
            label="总确诊"
            width="180"
            align="center">
        </el-table-column>
        <el-table-column
            prop="curConfirm"
            label="今日确诊"
            align="center">
        </el-table-column>
        <el-table-column
            prop="heal"
            label="治愈人数"
            align="center">
        </el-table-column>
        <el-table-column
            prop="died"
            label="总死亡人数"
            align="center">
        </el-table-column>
      </el-table>

    </div>
    </div>

  </div>







</template>


<script>
import md5 from "js-md5"
import param from "@/utils/param"
import axios from "axios";
import mixins from "@/fortendView/mixin/mixins"


export default {
  name: "index_1",
  components:{
  },
  mixins: [mixins],//融合的方法
  data() {
    return {
      // isBubble:this.$store.getters.isBubble,
      title:"今日疫情统计情况",
      appid:'8612',
      appSecert:"5950393d0942746cc73e8117e747c2d3",
      // sign:md5("appid"+this.appid+"5950393d0942746cc73e8117e747c2d3"),
      format:'json',
      loading:false,
      api:"https://uaqy.api.storeapi.net/api/94/219",
/*      tx_key_ip: "VBABZ-YDOC5-QDGIA-QMJVG-DHSY5-7TBWV",  //这个key就是你申请的密钥
      // let output="jsonp";
      tx_api_ip : "https://apis.map.qq.com/ws/location/v1/ip", //这个就是地理位置信息的接口*/
      MyLocation:'',//这个是用户的位置
      form: {

      },

      tableData:[],
    };
  },
  watch: {
    // "form.hope": "hope_replace_avoid_str",
    // "form.must": "must_replace_avoid_str",
    // "form.avoid": ["hope_replace_avoid_str", "must_replace_avoid_str"],
    // "isBubble":function (val)
    // {
    //   console.log("检测到啦")
    //   return this.$store.getters.isBubble;
    // }

  },
  /*要注意computed与watch的区别，例如下面的获取计算isBubble的过程，如果使用computed，就算store里面的isBubble的值发生改变了，
也不会执行computed里面的任何方法，
也就是说本页data里面的isBubble与store里面的isBubble不会发生任何关联，
即使你在data函数里面将store里面的isBubble值赋给isBubble，因为这么做只是取得他的一个副本
这时候watch的作用就来了，如果监听的某一个值（监听的是本页面的data里面的值）发生改变，将会执行某一个函数
*/
  computed:{
    // is_Bubble()
    // {
    //   return this.$store.getters.isBubble;
    // }

  },
  mounted() {
    // this.getLatestData();
    /*要注意，activited包括你一开始渲染的执行了*/
    // console.log(returnCitySN['cip']);
  },
  activated() {
    this.loading=true
    this.getLatestData()
    this.getLoaction((payload)=>{this.MyLocation=payload});
    // this.MyLocation=this.getLoaction();
    this.loading=false
  },
  methods: {


    // getLoaction()
    // {
    //   this.$jsonp(this.tx_api_ip, Object.assign({key:this.tx_key_ip},{output:"jsonp"}))
    //       .then(res => {
    //         // this.ip1=res;
    //         // console.log(res)
    //         let data=res.result;
    //         let nation=data.ad_info.nation;
    //         let province=data.ad_info.province;
    //         let city=data.ad_info.city;
    //         this.MyLocation=nation+"-"+province+"-"+city;
    //         /*localStorage.setItem("Location",this.MyLocation);*/
    //       })
    //       .catch(error => {
    //         // this.ip1=error;
    //         // console.log(error);
    //         popMessage(true,"获取当前位置失败","error");
    //       });
    // },
    /*解析数据*/
    AnalyticalAata(data)
    {
      // console.log(data);

      let TotalConfirm=0;//全国总确诊人数
      let gdTotalConfirm=0;//广东总确诊人数
      let curConfirm=0;//当前全国总确诊人数
      let gdCurConfirm=0;//当前广东确诊人数
      let retData=data.retdata;
      let gd=null;


      for (const retDataKey in retData) {


        if (retData[retDataKey].xArea =="广东"&&gd==null)
        {
          gd=retData[retDataKey];
        }

        TotalConfirm+=parseInt(retData[retDataKey].confirm);
        curConfirm+=parseInt(retData[retDataKey].curConfirm);
          this.tableData.push({

            currentTime:new Date(parseInt(retData[retDataKey].relativeTime)*1000).toLocaleString().replace(/:\d{1,2}$/,' '),
            city:retData[retDataKey].xArea,
            confirm:retData[retDataKey].confirm,
            curConfirm:retData[retDataKey].curConfirm,
            heal:retData[retDataKey].heal,
            died:retData[retDataKey].died
          })

      }


      gdTotalConfirm=gd.confirm;
      gdCurConfirm=gd.curConfirm;
      this.form['gdTotalConfirm']=gdTotalConfirm;
      this.form['gdCurConfirm']=gdCurConfirm;
      this.form['TotalConfirm']=TotalConfirm;
      this.form['curConfirm']=curConfirm;
    },
    //获取最新数据
    getLatestData()
    {
      let _this=this;
      let time=new Date().getTime();
      let data={

        appid:_this.appid,
        sign:md5("appid"+_this.appid+"format"+_this.format+"time"+time+""+_this.appSecert),
        time:time,
        format:_this.format,
      }

      let _param=param.urlencode(data,true)
      axios.get(_this.api+""+_param,'',{
        headers: {
          "Content-Type": "Content-Type: application/x-www-form-urlencoded;charset=utf-8"
        }
      })
          .then(res=>{

            let resData=res.data;
            console.log(resData)
            // this.currentTime=res.data.
            _this.AnalyticalAata(res.data)
          }).catch(err=>{
        this.$message({
          showClose: true,
          message: '获取最新数据失败',
          type: 'error'
        })});
    },


  }
}
</script>
<style scoped>



</style>

